<template>
  <view class="">
    <view class="page-pop" v-if="showPop">
      <view class="pop-con">
        <view class="con-box"
              :style="{'--back-rgba': hexToRgba($theme.primaryColor,0.2),'--before--back-rgba': hexToRgba($theme.primaryColor,0.2)}">
          <!--红娘牵线服务-->
          <view v-if="false">
            <view class="box-top">
              <image class="top-pic" :src="`${$domain}/static/icons/public/hn.svg`"></image>
              <view>百聊不如一见</view>
            </view>
            <view class="box-data">
              <view class="data-text">
                线下见面将大大提升您找到满意另一半的成功率和缩短时间。如需要红娘为您撮合并安排线下见面服务。
              </view>
              <view class="data-tip" :style="{'--back-rgba': hexToRgba($theme.primaryColor,0.2)}">
                请通过微信向您的红娘提出申请
              </view>
              <image class="data-ewm" mode="aspectFit" src="http://www.jiushuitv.com/content/images/qrcode.jpg"></image>
              <view class="data-contact">
                <set-svg width="24rpx" height="24rpx" class="contact-icon" old-color="#7751E7"
                         :newColor="$theme.primaryColor"
                         :svgString="`${$domain}/static/icons/guest/quotes.svg`"></set-svg>
                <view class="contact-text">红娘微信：sda23421</view>
                <set-svg width="24rpx" height="24rpx" class="contact-icon contact-iconRight" old-color="#7751E7"
                         :newColor="$theme.primaryColor"
                         :svgString="`${$domain}/static/icons/guest/quotes.svg`"></set-svg>
              </view>
            </view>
          </view>
          <!--红娘牵线服务已用完-->
          <view>
            <view class="box-top">
              <view>抱歉，您的牵线服务已用完</view>
            </view>
            <view class="box-card">
              <view class="card-left">
                <view class="left-title">
                  <set-svg width="34rpx"
                           height="34rpx"
                           class="title-icon"
                           old-color="#7751E7"
                           :newColor="$theme.primaryColor"
                           :svgString="`${$domain}/static/icons/guest/huiyuan.svg`"></set-svg>
                  <view>开通VIP会员</view>
                </view>
                <view class="left-tip">
                  红娘免费为您牵线
                </view>
              </view>
              <view class="card-btn">
                立即开通
              </view>
            </view>
            <view class="box-card">
              <view class="card-left">
                <view class="left-title">
                  <set-svg width="34rpx"
                           height="34rpx"
                           class="title-icon"
                           old-color="#7751E7"
                           :newColor="$theme.primaryColor"
                           :svgString="`${$domain}/static/icons/guest/xindong.svg`"></set-svg>
                  <view>红娘牵线服务套餐</view>
                </view>
                <view class="left-tip">
                  更划算的红娘牵线服务
                </view>
              </view>
              <view class="card-btn">
                立即开通
              </view>
            </view>
            <view class="box-tip">
              <view class="tip-title">
                <set-svg width="30rpx"
                         height="30rpx"
                         class="title-icon"
                         old-color="#7751E7"
                         :newColor="$theme.primaryColor"
                         :svgString="`${$domain}/static/icons/guest/xindong.svg`"></set-svg>
                <view class="">温馨提示</view>
              </view>
              <view class="tip-text">
                红娘将努力促成双方自愿交换联系方式，不包成功。牵线失败将退回牵线次数。
              </view>
            </view>
          </view>
        </view>
        <u-icon @click="showPop = false" class="con-close" color="#ffffff" name="close-circle" size="60"></u-icon>
      </view>
    </view>
    <slot></slot>
  </view>
</template>
<script lang="ts" setup>
import {hexToRgba} from "@/utils/hexToRgba";
import {ref} from "vue";

let showPop = ref(false)

</script>
<style scoped lang="scss">
.page-pop {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;

  .pop-con {
    max-width: 80%;

    .con-box {
      background-color: #ffffff;
      padding: 30rpx;
      border-radius: 30rpx;
      position: relative;
      overflow: hidden;
      background-image: linear-gradient(0deg, #FFFFFF 15%, var(--back-rgba) 99%);
      transform-style: preserve-3d;

      &:before, &:after {
        content: '';
        width: 700rpx;
        height: 700rpx;
        background: radial-gradient(50% 50% at 50% 50%, var(--before--back-rgba) 3%, transparent 100%);
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateZ(-1px) translateX(-50%) translateY(-50%);
      }

      &:after {
        left: auto;
        right: 0;
        transform: translateZ(-1px) translateX(50%) translateY(-50%);
      }

      .box-top {
        text-align: center;
        padding: 30rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #111111;

        .top-pic {
          width: 75rpx;
          height: 75rpx;
          margin: 0 auto 10rpx;
        }
      }

      .box-data {
        background-color: #ffffff;
        padding: 30rpx;
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #111111;

        .data-tip {
          display: block;
          width: auto;
          border-radius: 40rpx;
          background: linear-gradient(180deg, var(--back-rgba) 0%, rgba(119, 81, 231, 0.07) 100%);
          padding: 10rpx 30rpx;
          margin: 20rpx auto;
        }

        .data-ewm {
          display: block;
          width: 300rpx;
          height: 300rpx;
          margin: 30rpx auto;
        }

        .data-contact {
          display: flex;
          align-items: flex-start;
          justify-content: center;

          .contact-text {
            margin: 0 20rpx;
          }

          .contact-icon {
            flex-shrink: 0;
            margin-top: -20rpx;

            &Right {
              margin-top: 20rpx;
              transform: rotate(180deg);
            }
          }
        }
      }

      .box-card {
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .card-left {
          .left-title {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #111111;
            margin-bottom: 20rpx;

            .title-icon {
              margin-right: 10rpx;
            }
          }

          .left-tip {
            font-weight: normal;
            color: #999999;
            font-size: 24rpx;
          }
        }

        .card-btn {
          margin-left: 20rpx;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
          background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
          color: #fff;
          font-size: 28rpx;
        }
      }

      .box-tip {
        margin-top: 10rpx;
        .tip-title {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: var(--color-primary);
          .title-icon {
            margin-right: 10rpx;
          }
        }
        .tip-text {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }

    .con-close {
      display: block;
      margin: 30rpx auto;
      text-align: center;
      width: 60rpx;
    }
  }
}
</style>